@import './tailwind'
@import './components'
@import 'swiper/dist/css/swiper.min.css'

.qr-container
  @apply max-w-7xl
  @apply mx-auto

.qr-stripe-container

  &--offset
    @apply py-36

  &:nth-child(even)
    background-color #fff

  &:nth-child(odd)
    background-color rgb(247,248,251)

.qr-product-card
  @apply space-y-6
  @apply bg-white
  @apply rounded-md
  @apply shadow-lg

  &__head
    @apply flex
    @apply gap-x-2
    @apply items-start
    @apply duration-300
    @apply bg-white
    @apply p-5
    @apply border-b
    @apply rounded-md

  &__icon
    @apply w-9
    @apply aspect-square

  &__badge
    @apply inline-block
    @apply p-1
    @apply cursor-default
    @apply text-xs
    @apply not-italic
    @apply rounded-sm
    @apply border
    @apply border-solid
    @apply text-primary
    @apply border-primary

  &__content
    @apply relative
    @apply px-5
    @apply pb-5

    & > img
      @apply opacity-100
      @apply transition-opacity
      @apply duration-300

  &__cover
    @apply absolute
    @apply top-0
    @apply inset-x-5
    @apply space-y-4
    @apply opacity-0
    @apply transition-opacity
    @apply duration-300
    @apply leading-6
    @apply text-neutral-500

  &__action
    @apply flex
    @apply justify-between

  &:hover
    .qr-product-card
      &__head
        @apply -translate-y-5

      &__cover
        @apply opacity-100

      &__content > img
        @apply opacity-0
